﻿@{ ViewBag.Title = "jqGrid in ASP.NET MVC - Subgrid"; }

<table id="jqgOrders" cellpadding="0" cellspacing="0"></table>
<div id="jqgpOrders" style="text-align:center;"></div>

@section JavaScript {
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgOrders').jqGrid({
                //url from wich data should be requested
                url: '@Url.Action("Orders")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['OrderID', 'Customer', 'Employee', 'OrderDate', 'RequiredDate', 'ShippedDate', 'ShipCountry'],
                //columns model
                colModel: [
                            { name: 'OrderID', index: 'OrderID', align: 'left' },
                            { name: 'Customer', index: 'CustomerID', align: 'left' },
                            { name: 'Employee', index: 'EmployeeID', align: 'left' },
                            { name: 'OrderDate', index: 'OrderDate', align: 'left' },
                            { name: 'RequiredDate', index: 'RequiredDate', align: 'left' },
                            { name: 'ShippedDate', index: 'ShippedDate', align: 'left' },
                            { name: 'ShipCountry', index: 'ShipCountry', align: 'left' }
                            ],
                //pager for grid
                pager: $('#jqgpOrders'),
                //number of rows per page
                rowNum: 10,
                //initial sorting column
                sortname: 'OrderID',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                //grid height
                height: '100%',
                //enable subgrid
                subGrid: true,
                //subGridRowExpanded event
                subGridRowExpanded: function(subgridId, rowId) {
                    var subgridTableId = subgridId + '_t';
                    jQuery('#' + subgridId).append('<table id="' + subgridTableId + '"></table>');
                    var subgridPagerId = subgridId + '_p';
                    jQuery('#' + subgridId).append('<div id="' + subgridPagerId + '"></div>');
                    $('#' + subgridTableId).jqGrid({
                        colNames: ['Product', 'Unit Price', 'Quantity', 'Discount'],
                        colModel: [
                            { width: 200, name: 'Product' },
                            { width: 100, name: 'UnitPrice' },
                            { width: 100, name: 'Quantity' },
                            { width: 100, name: 'Discount' }
                        ],
                        url: '/Home/OrderDetailsSubgridAsGrid?id=' + rowId,
                        datatype: 'json',
                        mtype: 'POST',
                        pager: '#' + subgridPagerId,
                        rowNum: 10,
                        sortname: 'Product',
                        viewrecords: true,
                        height: '100%'
                    });
                }
            });
        });
    </script>
}